<template>
    <div class="gd-main" id="scroll_box">
        <div class="md-wrap" id="md-wrap">
            <div class="result" v-show="success.show">
                <svg-icon icon-class="success" />&nbsp;上报成功
            </div>
            <!-- 姓名 -->
            <div class="md-item_text">
                <van-field v-model="form.recordName" label="姓名" placeholder="请输入姓名" :disabled="success.disabled" required/>
            </div>
            <!-- 身份证号 -->
            <div class="md-item_text">
                <van-field v-model="form.idNumber" label="身份证号" placeholder="请输入身份证号" maxlength="18" :disabled="success.disabled" required/>
            </div>
            <!-- 手机号 -->
            <div class="md-item_text" >
                <van-field v-model="form.phoneNumber" type="digit" label="手机号" placeholder="请输入手机号" maxlength="11" :disabled="success.disabled" required/>
            </div>
            <!-- 籍贯 -->
            <div class="md-item_text" >
                <van-field @click="showAreaHandle('showAreaHomeTown')" v-model="area.homeTown" readonly label="籍贯" placeholder="请选择籍贯" required/>
            </div>
            <!-- 籍贯省市区联动 -->
            <van-popup v-model="area.showAreaHomeTown" position="bottom">
                <van-area 
                    :area-list="areaList" 
                    title="籍贯选择"
                    @confirm="areaConfirmHandle($event,'homeTown','showAreaHomeTown')"
                    @cancel="areaCancelHandle('showAreaHomeTown')"
                />
            </van-popup>
            <!-- 当前所在地 -->
            <div class="md-item_text" >
                <van-field @click="showAreaHandle('showAreaCurrentLocation')" v-model="area.currentLocation" readonly label="当前所在地" placeholder="请选择当前所在地" required/>
            </div>
            <!-- 当前所在地省市区联动 -->
            <van-popup v-model="area.showAreaCurrentLocation" position="bottom">
                <van-area 
                    :area-list="areaList" 
                    title="当前所在地选择" 
                    @confirm="areaConfirmHandle($event,'currentLocation','showAreaCurrentLocation')"
                    @cancel="areaCancelHandle('showAreaCurrentLocation')"
                />
            </van-popup>
            <!-- 是否有湖北人员接触史 -->
            <div class="md-item_radio">
                <span><span style="color:#f00;">*</span>是否有湖北人员接触史</span>
                <van-radio-group v-model="form.isContact" :disabled="success.disabled" style="display:flex;">
                    <van-radio class="md-item_radio_item" :name="1">是</van-radio>
                    <van-radio class="md-item_radio_item" :name="0">否</van-radio>
                </van-radio-group>
            </div>
            <!-- 是否有疑似/确诊肺炎患者接触史 -->
            <div class="md-item_radio">
                <span><span style="color:#f00;">*</span>是否有疑似/确诊肺炎患者接触史</span>
                <van-radio-group v-model="form.isContactConfirm" :disabled="success.disabled" style="display:flex;">
                    <van-radio class="md-item_radio_item" :name="1">是</van-radio>
                    <van-radio class="md-item_radio_item" :name="0">否</van-radio>
                </van-radio-group>
            </div>
            <!-- 最近接触日期 -->
            <div class="md-item_text" v-if="showContactDate">
                <van-field @click="showCalendarHandle('showDateContactDate')" v-model="form.contactDate" readonly label="最近接触日期" placeholder="请选择日期" required/>
            </div>
            <!-- 最近接触日期日历 -->
            <van-calendar 
                v-model="calendar.showDateContactDate" 
                :min-date="calendar.minDate" 
                :max-date="calendar.maxDate"
                :default-date="calendar.defaultDate"
                @confirm="calendarConfirmHandle($event,'contactDate','showDateContactDate')" />
            <!-- 是否有疑似/确诊肺炎患者接触史 -->
            <div class="md-item_radio">
                <span><span style="color:#f00;">*</span>是否途经/到达湖北</span>
                <van-radio-group v-model="form.isApproach" :disabled="success.disabled" style="display:flex;">
                    <van-radio class="md-item_radio_item" :name="1">是</van-radio>
                    <van-radio class="md-item_radio_item" :name="0">否</van-radio>
                </van-radio-group>
            </div>
            <!-- 是否有发热咳嗽症状 -->
            <div class="md-item_radio">
                <span><span style="color:#f00;">*</span>是否有发热咳嗽症状</span>
                <van-radio-group v-model="form.isSymptom" :disabled="success.disabled" style="display:flex;">
                    <van-radio class="md-item_radio_item" :name="1">是</van-radio>
                    <van-radio class="md-item_radio_item" :name="0">否</van-radio>
                </van-radio-group>
            </div>
            <!-- 预计到岗时间 -->
            <div class="md-item_text" >
                <van-field @click="showCalendarHandle('showDateDutyTime')" v-model="form.dutyTime" readonly label="预计到岗时间" placeholder="请选择预计到岗时间" required/>
            </div>
            <!-- 预计到岗日历 -->
            <van-calendar 
                v-model="calendar.showDateDutyTime" 
                :min-date="calendar.minDate" 
                :max-date="calendar.maxDate"
                :default-date="calendar.defaultDate"
                @confirm="calendarConfirmHandle($event,'dutyTime','showDateDutyTime')" />
            <!-- 返岗交通方式 -->
            <div class="md-item_text" >
                <van-field @click="showPickerHandle('showPickerReturnTransport')" v-model="form.returnTransport" label="返岗交通方式" readonly placeholder="请输入返岗交通方式"/>
            </div>
            <!-- 返岗交通方式列表 -->
            <van-popup v-model="picker.showPickerReturnTransport" position="bottom">
                <van-picker 
                        show-toolbar
                        title="交通方式选择"
                        :columns="picker.returnTransportList" 
                        @confirm="pickerConfirmHandle($event,'returnTransport','showPickerReturnTransport')"
                        @cancel="pickerCancelHandle('showPickerReturnTransport')"
                />
            </van-popup>
            <!-- 车次/航班/车牌 -->
            <div class="md-item_text" >
                <van-field v-model="form.trafficSign" label="车次/航班/车牌" maxlength="10" :disabled="success.disabled" placeholder="请输入车次/航班/车牌"/>
            </div>
            <!-- 工种 -->
            <div class="md-item_text">
                <van-field @click="showPickerHandle('showPickerJobType')" v-model="form.jobType" label="工种" readonly placeholder="请选择工种" required/>
            </div>
            <!-- 工种选择列表 -->
            <van-popup v-model="picker.showPickerJobType" position="bottom">
                <van-picker 
                        show-toolbar
                        title="工种选择"
                        :columns="picker.jobTypeList" 
                        @confirm="pickerConfirmHandle($event,'jobType','showPickerJobType')"
                        @cancel="pickerCancelHandle('showPickerJobType')"
                />
            </van-popup>
            <!-- 确认按钮 -->
            <div class="md-item_btn">
                <van-button :disabled="btnSubmit.disabled" v-touch.tap="btnSubmitHandle" v-show="!success.hidden" type="info" style="flex-grow:1;">提交</van-button>
            </div>
        </div>
        <transition>
            <router-view />
        </transition>
    </div>
</template>

<script>
    import {Button,Field,RadioGroup,Radio,Calendar,Picker,Popup,Area,Toast} from 'vant';
    import {dateFormat} from '@/utils/format';
    import areaList from '@/utils/area';
    import {queryDict,newReworkRecord} from '@/request/checkIn';
    
    export default {
        //认证
        name: 'authentication',
        data(){
            return {
                form:{
                    // 登记姓名
                    recordName:'',
                    // 身份证号
                    idNumber:'',
                    // 手机号
                    phoneNumber:'',
                    // 籍贯
                    homeTown:'',
                    // 当前所在地
                    currentLocation:'',
                    // 是否有湖北人员接触史；0否1是
                    isContact:0,
                    // 是否有疑似/确诊肺炎患者接触史；0否1是
                    isContactConfirm:0,
                    // 最近接触日期
                    contactDate:'',
                    // 是否途径/到达湖北；0否1是
                    isApproach:0,
                    // 是否有发热咳嗽症状；0否1是
                    isSymptom:0,
                    // 预计到岗时间
                    dutyTime:'',
                    // 返岗交通方式
                    returnTransport:'',
                    // 车次/航班/车牌
                    trafficSign:'',
                    // 工程编号 (项目 id)
                    projectId:'',
                    //工种
                    jobType:''
                },
                dictionaryEmpty:{
                    recordName: '登记姓名',
                    idNumber: '身份证号',
                    phoneNumber: '手机号',
                    homeTown: '籍贯',
                    currentLocation: '当前所在地',
                    dutyTime: '预计到岗时间',
                    projectId: '项目',
                    jobType: '工种',
                    contactDate: '最近接触日期'
                },
                //日历配置
                calendar:{
                    showDateContactDate:false,
                    showDateDutyTime:false,
                    minDate:new Date(new Date().getFullYear() - 10,0),
                    maxDate:new Date(new Date().getFullYear() + 10,0),
                    defaultDate:new Date()
                },
                //picker 配置
                picker:{
                    //工种列表
                    showPickerJobType:false,
                    jobTypeList:[],
                    //交通
                    showPickerReturnTransport:false,
                    returnTransportList:['飞机','火车','汽车','其他']
                },
                //省市区三级联动数据
                areaList:areaList,
                // 项目名称
                projectName:'',
                //省市区
                area:{
                    showAreaHomeTown:false,
                    showAreaCurrentLocation:false,
                    //户籍文本值
                    homeTown:'',
                    //所在地文本值
                    currentLocation:''
                },
                btnSubmit:{
                    disabled:false
                },
                //请求成功
                success:{
                    //显示
                    show:false,
                    //禁用
                    disabled:false,
                    //隐藏
                    hidden:false
                }
            }
        },
        computed:{
            // 存在接触时，才会显示接触日期
            showContactDate(){
                return this.form.isContact || this.form.isContactConfirm;
            }
        },
        methods:{
            //日历 - 显示（接触 & 返工日期）
            showCalendarHandle(show){
                if(this.success.disabled){
                    return;
                }
                this.calendar[show] = true;
            },
            //日历 - 确定 （接触 & 返工日期）
            calendarConfirmHandle(e,value,show){
                this.form[value] = dateFormat('YYYY-MM-DD',e);
                this.calendar[show] = false;
            },
            //三级联动 - 显示（籍贯 & 所在地）
            showAreaHandle(show){
                if(this.success.disabled){
                    return;
                }
                this.area[show] = true;
            },
            //三级联动 - 确定（籍贯 & 所在地）
            areaConfirmHandle(e,value,show){
                let codeObj = e[e.length - 1];
                // 精确到区的编码
                this.form[value] = codeObj.code;
                // 转换文本
                this.area[value] = this.collectionJoin(e);
                // 显示控制
                this.area[show] = false;
                console.log('三级联动: ',this.form[value]);
            },
            //三级联动 - 取消（籍贯 & 所在地）
            areaCancelHandle(show){
                this.area[show] = false;
            },
            //工种选择 - 显示
            showPickerHandle(show){
                if(this.success.disabled){
                    return;
                }
                this.picker[show] = true;
            },
            //工种选择 - 确定
            pickerConfirmHandle(e,value,show){
                this.form[value] = e;
                this.picker[show] = false;
            },
            // 工种 - 取消
            pickerCancelHandle(show){
                this.picker[show] = false;
            },
            // 提交表单
            btnSubmitHandle(){
                // 按钮禁用
                if(this.btnSubmit.disabled){
                    return;
                }
                
                let keys = Object.keys(this.form),
                    validate = true;
                // 验证必填项
                keys.forEach(key => {
                    switch(key){
                        // 必填项目验证 - 去掉了 projectId 的验证
                        case 'recordName':
                        case 'idNumber':
                        case 'phoneNumber':
                        case 'homeTown':
                        case 'currentLocation':
                        case 'dutyTime':
                        case 'projectId':
                        case 'jobType':
                            if(this.form[key] === ''){
                                Toast(this.dictionaryEmpty[key] + '不能为空');
                                validate = false;
                            }
                            break;
                    }
                });
                
                if(this.showContactDate && this.form.contactDate === ''){
                    Toast(this.dictionaryEmpty['contactDate'] + '不能为空');
                    validate = false;
                }
                
                //提交
                if(validate){
                    let query = new FormData();
                    
                    keys.forEach(key => {
                        query.append(key,this.form[key]);
                    });
                    
                    newReworkRecord(this.form).then(res => {
                        // 请求成功返回验证页
                        Toast({
                            message:res.entry.respMsg,
                            duration:2000
                        });
                        //进行页面滚动 & 显示隐藏的成功提示元素 & 禁用表单项
                        this.success.show = true;
                        this.success.hidden = true;
                        this.success.disabled = true;
                        //滚动
                        document.querySelector('#scroll_box').scrollTop = 0;
                        
                    }).catch(() => {
                        
                    }).then(() => {
                        this.btnSubmit.disabled = false;
                    });
                    this.btnSubmit.disabled = true;
                }
            }
        },
        components:{
            [Button.name]:Button,
            [Field.name]:Field,
            [RadioGroup.name]:RadioGroup,
            [Radio.name]:Radio,
            [Calendar.name]:Calendar,
            [Picker.name]:Picker,
            [Popup.name]:Popup,
            [Area.name]:Area,
            [Toast.name]:Toast
        },
        mounted(){
            //给 projectId 赋值
            this.form.projectId = this.$route.query.projectId;
            //请求 projectName
            
            // 加载工种
            queryDict().then(res => {
                let data = [],
                    jobTypeList = this.picker.jobTypeList = [];
                if(res.entry.jobType){
                    data = res.entry.job;
                }
                data.forEach(item => {
                    jobTypeList.push(item.dictValue);
                });
            });
        }
    }
</script>

<style lang="less" scoped>
.gd-main{
    width:100vw;
    height:100vh;
    background-image:url(../assets/image/bg-login-1.jpg);
    background-size:100% 100%;
    overflow:hidden;overflow-y:auto;
}
.md-wrap{
    background-color:#fff;
    border-radius:.1rem;padding:.3rem 0;margin:4.4rem .3rem .5rem;
}
.md-item_base{
    margin:.1rem .3rem;
    display:flex;
    
}
.md-banner{
    margin:0;height:2rem;
    img{
        width:100%;height:100%;
    }
}
.md-item_text:extend(.md-item_base){
    justify-content:center;
    /deep/ input{
        text-align:right;
    }
}
.md-item_radio:extend(.md-item_base){
    justify-content:space-between;
    background-color:#fff;padding:8px 10px;
    font-size:14px;
    &_item{
        margin-left:20px;
    }
}
.md-item_btn:extend(.md-item_base){
    justify-content:center;
}
.result{
    padding:.2rem 0;text-align:center;
    font-size:24px;line-height:1;color:#008000;
}
</style>